<template>
  <div class="sensor-details">
    <div class="sensor-details-top">
      <b-tabs v-model="activeTab" :items="tabs" class="sensor-details-tabs"></b-tabs>
    </div>
    <div class="sensor-details-content">
      <real-time-curve :sensor="params" v-if="activeTab === '1'" />
      <alarm-record :sensor="params" v-else-if="activeTab === '2'" />
      <calibration-record :sensor="params" v-else-if="activeTab === '3'" />
      <history-curve :params="params" v-else-if="activeTab === '4'" />
    </div>
  </div>
</template>
<script setup lang="ts">
import BTabs from '@/components/b-tabs.vue'
import { ref, onMounted } from 'vue'
import historyCurve from '@/views/DataView/alarm/jcjkAlarmDetail/historyCurve.vue'
import realTimeCurve from './realTimeCurve.vue'
import calibrationRecord from './calibrationRecord.vue'
import alarmRecord from './alarmRecord.vue'
import { useAuthStore } from '@/store/auth'
import { storeToRefs } from 'pinia'
defineProps({
  params: {
    type: Object,
    default: () => {}
  }
})

const authStore = useAuthStore()
const { globalParams } = storeToRefs(authStore)

onMounted(() => {
  if (globalParams.value.startTime && globalParams.value.endTime) {
    tabs.value[0] = { id: '4', label: '历史曲线' }
    activeTab.value = '4'
  } else {
    activeTab.value = '1'
  }
})

const activeTab = ref('')
const tabs = ref([
  { id: '1', label: '实时曲线' },
  { id: '2', label: '标校记录' },
  { id: '3', label: '历史报警' }
])
</script>
<style scoped lang="scss">
.sensor-details {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--scale));
  .sensor-details-content {
    flex: 1;
    overflow: auto;
  }
}
</style>
